<template>
	<view class="charge-station-box">
		<view v-if="countList.length"  class="content-box">
			<scroll-view  
			   scroll-y="true" 
			   class="scroll-view" 
			   scroll-with-animation="true" 
			   @scrolltolower="scrollDown"
			   refresher-enabled="true"
			   :refresher-triggered="triggered"
			   @refresherrefresh="onRefresh"
			>   
				<view  class="list-item" 
					   v-for="(item,index) in  countList" 
					   :key="index" 
					   :class="{active:orderIndex==index}">
					<view class="list-item-header">
						<image src="../../static/iconHome2.png" class="pile-type" v-if="item.ownerMemberId === item.memberId"></image>
						<image src="../../static/iconHome1.png" class="pile-type" v-else></image>
						<text class="pile-name">{{item.socketName}}</text>
						<view class="order-status" 
							:style="{
								backgroundColor: orderStatusEnum[item.orderStatus].background,
								color: orderStatusEnum[item.orderStatus].color,
							}">{{orderStatusEnum[item.orderStatus].text}}</view>
					</view>   
					<view v-if="item.orderStatus !== 'RUN_FAIL'">
						<view class="list-item-info">
							<text class="text-left">开始时间</text>
							<text class="text-right">{{formatTime(item.startTime)}}</text>
						</view>
						<view  class="list-item-info">
							<text class="text-left">结束时间</text>
							<text class="text-right">{{formatTime(item.endTime)}}</text>
						</view>
						<view  class="list-item-info">
							<text class="text-left">充电时长</text>
							<text class="text-right">{{handleTime(item.totalTime)}}</text>
						</view>
						<view  class="list-item-info">
							<text class="text-left">充电电量</text>
							<text class="text-right">{{item.totalPower}}</text>
						</view>
					</view>
					<view class="list-item-info">
						<text class="text-left">充电用户</text>
						<text class="text-right">{{item.phone}}</text>
					</view>
					<view class="list-item-info">
						<text class="text-left">结束原因</text>
						<text class="text-right">
							<text v-if="item.orderStatus === 'CHARGING'">--</text>
							<text v-else>{{item.endReason}}</text>
						</text>
					</view>
				</view>
				<view class="load-text">{{loadText}}</view>
			</scroll-view>
		</view>
		<view v-else class="empty-box">
			<view><image alt="" src="../../static/emptyData.png" class="empty-img"></image></view>
			<view>暂无数据</view>
		</view>
		<Footer :selected="selected"/>
	</view>
</template>

<script>
	import Footer from '../component/footer/index.vue'
	import { orderList } from './indexServ.js'
	import { formatTime } from '../../utils/index.js'
	export default {
		name: 'template',
		components: { Footer },
		data() {
			return {
				orderStatusEnum: {
					RUN_FAIL: { text: '启动失败', color: '#FF4242', background: '#FFEDED' },
					FINISH: { text: '充电完成', color: '#666666', background: '#F5F5F5' },
					CHARGING: { text: '充电中', color: '#FFFFFF', background: '#15D193' },
				},
				selected: 1,
				finished: false,
				loadText: '',
				pageIndex: 1,
				pageSize: 20,
				countList: [],
				formatTime: formatTime,
				triggered: false
			}
		},
		onLoad() {
		},
		onShow() {
			this.initLoad()
		},
		methods: {
			initLoad() {
				this.finished = false
				this.pageIndex = 1
				this.getData()
			},
			onRefresh() {
				this.triggered = true
				this.initLoad()
			},
			scrollDown(e) {
				if (this.finished) {
					this.loadText = '已经到底了!'
				} else {
					this.getData()
				}
			},
			async getData() {
				await orderList({pageSize: this.pageSize, pageIndex: this.pageIndex}).then((res) => {
					const { code, body, message } = res
					if (code === '0000000') {
						this.triggered = false
						this.pageIndex++
						if (body.currentPage === '1') {
						    this.countList = body.records
						} else {
						    this.countList.push(...body.records)
						}
						if (parseInt(body.currentPage) >= parseInt(body.totalPage)) {
						    this.finished = true
						}
						return
					}
					this.$u.toast(message)
				}).catch(() => {
					this.$u.toast('接口返回异常')
				})
			},
			handleTime(value) {
				if (value) {
					let hour = Math.floor(value / 60)
					value = (hour ? hour + '小时' : '') + (value % 60) + '分钟'
				}
				return value
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.charge-station-box {
		/* scroll-view 样式 */
		.scroll-view {
			width: 100%;
			height: calc(100vh - 50rpx * 2);
			overflow:scroll
		}
		.content-box {
			.list-item {
				background: #fff;
				border-radius: 8rpx * 2;
				margin: 12rpx * 2;
				padding: 16rpx * 2 12rpx * 2;
				position: relative;
				.pile-type {
					width: 24rpx * 2;
					height: 24rpx * 2;
				}
				.pile-name {
					font-size: 16rpx * 2;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					position: relative;
					margin-left: 4rpx * 2;
					top: -6rpx * 2;
				}
			    .order-status {
					position: absolute;
					right: 12rpx * 2;
					top: 16rpx * 2;
					padding: 3rpx * 2 8rpx * 2;
					border-radius: 12rpx * 2;
					font-size: 14rpx * 2;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}
			    .list-item-header {
					margin-bottom: 16rpx * 2;
				}
				.list-item-info {
					margin-bottom: 8rpx * 2;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.text-left {
						font-size: 14rpx * 2;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.text-right {
						font-size: 14rpx * 2;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		    .load-text {
		    	text-align: center;
		    	color: #ccc;
		    	padding-bottom: 70rpx * 2;
		    }
		}
		.empty-box {
			display: flex;
			text-align: center;
			flex-direction: column;
			justify-content: center;
			height: 100vh;
			align-items: center;
			margin-top: -70rpx *2;
			.empty-img {
				width: 160rpx * 2;
				height: 160rpx * 2;
				// margin-top: 20%;
				margin-bottom: 12rpx * 2;
			}
		}
	}
</style>